<template>
  <div style="margin: 0 10px; overflow: hidden; height: 100vh">
    <nav>
      <template v-for="route of routes">
        <a
          class="demo-link"
          v-if="route.path.startsWith('/demo')"
          @click="() => toDemo(route.path)"
        >
          {{ route.meta?.title }}
        </a>
      </template>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { routes } from "@/router";
import { useRouter } from "vue-router";

const router = useRouter();

function toDemo(path: string) {
  router.push(path);
}
</script>

<style scoped>
nav > * {
  margin-right: 10px;
}
a.demo-link {
  color: blue;
  font-size: 18px;
  text-decoration: underline;
}
a.demo-link:hover {
  color: green;
  cursor: pointer;
}
</style>
